<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>

<div id="application">
    <button @click="preview" v-show="index !== 1">上一张</button>
    <img :src="imageArray[index]" alt="">
    <button @click="next" v-show="index !== 8" >下一张</button>
</div>

<script type="text/javascript">
    let vueModel = new Vue({
        el : "#application",
        data : {
            index : 1,
            imageArray : [
                './image/img1.jpg',
                './image/img2.jpg',
                './image/img3.jpg',
                './image/img4.jpg',
                './image/img5.jpg',
                './image/img6.jpg',
                './image/img7.jpg',
                './image/img8.jpg',
            ]
        },
        methods : {
            preview : function () {
                this.index --;

            },
            next : function () {
                this.index ++;
            }
        }
    });
</script>
</body>
</html>